{extend name="public/baseLayuimini"}
{block name="title"}
<script src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"></script>
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
{/block}
{block name="css"}

<style>
    body {margin: 0px;background: #fff;}
    .upload {width: 100px;height: 100px;border: 1px solid #ddd;background-repeat: no-repeat;background-size: 100% 100%;position: relative;}
    .upload .icon {width: 100%;height: 100%;display: flex;justify-content: space-evenly;align-items: center;font-size:26px;color: #999;position: absolute;left: 0;top: 0px;z-index:10;background-size: 100% 100%;background-repeat: no-repeat;}
    .fa-trash,.fa-repeat,.fa-search-plus {display: none}
    .upload .icon.uploaded:hover .fa-search-plus {display: block;}
    .upload .icon.uploaded:hover .fa-repeat {display: block;}
    .upload .icon.uploaded:hover .fa-trash {display: block;}
    .outbtn {
        position: absolute;
        right: -29px;
        top: 0;
        height: 38px;
        width: 30px;
        text-align: center;
        line-height: 38px;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        cursor: pointer;
    }
    #file_name {line-height: 38px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    form {margin-top: 10px;padding-right: 10px;}
</style>
{/block}
{block name="main"}

<form class="layui-form" action="" lay-filter="form">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="hidden" name="id">
            <input type="hidden" name="site_id">
            <input type="hidden" name="column_id">
            <input type="text" name="title" autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">短标题</label>
            <div class="layui-input-inline">
                <input type="text" name="short_title" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test5" name="date">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">虚拟观看</label>
            <div class="layui-input-inline">
                <input type="text" name="views" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">置顶</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="zhiding" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF" value="1">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort"class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label layui-btn" id="test8" style="margin-left: 30px;">上传文件</label>
            <div class="layui-input-inline">
                <p class="layui-input" id="file_name"></p>
                <input type="hidden" id="file" name="file">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">缩略图</label>
            <div class="layui-input-inline upload">
                <div class="icon">
                    <input type="hidden" name="thumbnail">
                    <i class="fa fa-cloud-upload"></i>
                    <i class="fa fa-trash"></i>
                    <i class="fa fa-repeat"></i>
                    <i class="fa fa-search-plus"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">关键字</label>
        <div class="layui-input-block">
            <input type="text" name="keyword" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="description" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">高级内容</label>
        <div class="layui-input-block">
            <script id="editor" name="content" type="text/plain" style="width:95%;height:600px;"></script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">SEO标题</label>
        <div class="layui-input-block">
            <input type="text" name="seo_title" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">SEO关键字</label>
        <div class="layui-input-block">
            <input type="text" name="seo_keyword" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">SEO描述</label>
        <div class="layui-input-block">
            <textarea name="seo_description" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item" style="width: 100%;display: flex;justify-content: center;">
        <button class="layui-btn" lay-submit="form" lay-filter="demo2">提交</button>
        <button class="layui-btn" lay-submit="form" lay-filter="demo2">重置</button>
    </div>
</form>
{/block}
{block name="js"}
<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form','miniTab','element','upload','layer','laydate'], function () {
        var form = layui.form, layer = layui.layer, miniTab = layui.miniTab,$ = layui.jquery, element = layui.element, upload = layui.upload,layer = layui.layer,id = '{$Request.param.id}',column_id = '{$Request.param.column_id}',laydate = layui.laydate
        var ue = UE.getEditor('editor');
        ue.ready(function(){
            getComLan()
        })
        //监听提交
        form.on('submit(demo2)', function (data) {
            data = data.field
            $.ajax({
                url:'/admin/editArticle',
                data,
                type:'post',
                success:res=>{
                    if(res.code == 200){
                        layer.confirm('提交成功,是否继续添加？', {
                            btn: ['继续添加','返回列表'] //按钮
                        }, function(){
                            window.location.href = '/admin/editArticle?column_id='+data.column_id
                        }, function(){
                            miniTab.deleteCurrentByIframe();
                        });
                    }

                }
            })
            return false;
        });
        //创建时间日期选择器
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
        });
        //渲染上传文件
        upload.render({
            elem: '#test8'
            ,url: '/system/uploadfile' //改成您自己的上传接口
            ,accept:'file'
            ,before:function(){
                layer.load();
            }
            ,done: function(res){
                layer.closeAll('loading')
                if(res.code != 200){
                    layer.msg(res.msg);
                    return false;
                }
                layer.msg(res.msg)
                $("#file_name").text(res.file.name)
                $("#file").val(res.file.src)
            },
            error:function(){
                layer.closeAll('loading');
            }
        });
        //上传组件开始
        $(".fa-cloud-upload").click(function(){
            layer.open({
                type: 2,
                content: '/component/uploadImg',
                title:"图片编辑",
                area:['700px','450px'],
                btn:['确定'],
                id:'chooseImg',
                yes: (index, layero)=>{
                    let src = $(layero).find('iframe')[0].contentWindow.src.value
                    $(this).prev('input').val(src).parent().css({backgroundImage:"url("+src+")"}).addClass('uploaded')
                    $(this).hide()
                    layer.close(index)
                }
            });
        })
        $(".fa-trash").click(function(){
            $(this).parent().removeClass('uploaded').css({backgroundImage: ''}).find('input').val('').parent().find('.fa-cloud-upload').show()
        })
        $(".fa-repeat").click(function(){
            var _this = this
            layer.open({
                type: 2,
                content: '/component/uploadImg',
                title:"图片编辑",
                area:['700px','450px'],
                btn:['确定'],
                yes: (index, layero)=>{
                    let src = $(layero).find('iframe')[0].contentWindow.src.value
                    $(_this).parent().css({backgroundImage:"url("+src+")"}).addClass('uploaded').find('input').val(src)
                    layer.close(index)
                },
                cancel: function(){
                    $(_this).parent().removeClass('uploaded').find('.fa-cloud-upload').show()
                }
            });
        })
        $(".fa-search-plus").click(function(){
            var src = $(this).parent().css("backgroundImage").substring(5,($(this).parent().css("backgroundImage").length - 2))
            src = {
                "title": "", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式
                    {
                        "src": src, //原图地址
                    }
                ]
            }
            layer.photos({
                photos: src,
                //0-6的选择，指定弹出图片动画类型，默认随机
                anim: 5
            });
        })
        function getComLan(){
            let {date,views} = init()
            if(id){
                $.get("/admin/editArticle",{id:id},obj=>{
                    if(obj.code == 200){
                        let data = obj.data
                        let {id,site_id,column_id,title,short_title,keyword,description,seo_title,seo_keyword,seo_description,thumbnail,file,date,views,sort,content,lb,zhiding,file_name} = obj.data
                        form.val('form', {
                            id,
                            site_id,
                            column_id,
                            title,
                            short_title,
                            keyword,
                            description,
                            seo_title,
                            seo_keyword,
                            seo_description,
                            thumbnail,
                            file,
                            date,
                            views,
                            sort,
                            lb,
                            zhiding})
                        if(thumbnail){
                            $(".upload .icon").css({backgroundImage:`url("${thumbnail}")`}).addClass('uploaded').find('.fa-cloud-upload').hide()
                        }

                        $("#file_name").text(file_name)
                        ue.setContent(content ?? '')
                    }else{
                        layer.msg('未获取到数据,请返回上层',function(){
                            miniTab.deleteCurrentByIframe();
                        })
                    }

                })
            }else if(column_id){
                form.val('form',{
                    column_id:column_id,
                    sort:99,
                    zhiding:1,
                    date,
                    views,
                    site_id:'{$Think.session.info.site.id}'
                })
            }
        }
        function init(){
            var date = new Date();
            var y = date.getFullYear();
            var m = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
            var d = date.getDate() > 10 ? date.getDate() : '0' +date.getDate();
            var h = date.getHours();
            var i = date.getMinutes();
            var s = date.getSeconds() > 10 ? date.getSeconds() : '0' + (date.getSeconds());
            var views = Math.floor(Math.random() * (999 - 100)) + 100;
            return {date:`${y}-${m}-${d} ${h}:${i}:${s}`,views}
        }

    })
</script>
{/block}